<template>
  <div :class="['confirm-wrapper', 'flex-r-c',{'fadeIn':show}]">
      <div class="content">
            <h3 class="title">温馨提示</h3>
            <p class="text">{{text}}</p>
            <div class="btn-group flex-r-b">
                <button class="cancel" @click='handleClick(false)'>取消</button>
                <button class="confirm" @click='handleClick(true)'>确认</button>
            </div>
        </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: ["text",'show'],
  data() {
    return {};
  },
  created() {},
  mounted() {},
  computed: {},
  methods: {
    handleClick(flag){
      this.$emit('confirm',flag)
    }
  },
  watch: {}
};
</script>
<style lang="scss" scoped>
@import "../../public/sass/base.scss";
.confirm-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1);
  z-index: 99;
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s;
  .content {
    position: relative;
    width: 5.2rem;
    height: 2.7rem;
    border-radius: 0.2rem;
    background: white;
    text-align: center;
    .title {
      font-size: 0.3rem;
      color: $c-33;
      margin-top: 0.5rem;
    }
    .text {
      margin-top: 0.2rem;
      font-size: 0.26rem;
      color: $c-33;
    }
    .btn-group {
      @include top-border-1px($c-ef);
      position: absolute;
      bottom: 0;
      width: 100%;
      button {
        flex: 1;
        height: 0.8rem;
        color: $c-ffba17;
        font-size: 0.28rem;
        &.cancel {
          font-weight: bold;
          @include right-border-1px($c-ef);
        }
      }
    }
  }
}
.fadeIn {
  visibility: visible;
  opacity: 1;
}
</style>